<template>
	<div class="icon">
	<swiper ref="mySwiper" >

    	<swiper-slide v-for="(page,index) in pages" :key='index' >

			<div class="icon-img" v-for="item in page" :key='item.id'>
				<div class="icon-img-tu">
					<img class="tu1" :src="item.imgUrl" alt="">
				</div>
				<p class="icon-font">{{item.desc}}</p>
			</div>
	
		</swiper-slide>
    
  	</swiper>
		
		
		
		

	</div>
</template>

<script>

export default {
	name:'HomeIcon',
	props:{
		IconList:Array
	},

	computed:{
		pages(){
			const pages=[]
			this.IconList.forEach((item,index)=>{
				const page=Math.floor(index/8)
				if(!pages[page])
				{
					pages[page]=[]	
				}
				pages[page].push(item)
			})
			return pages
		}
	}
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>

	.icon
		
		overflow :hidden
		
		.icon-img
			
			position:relative
			float :left
			overflow :hidden
			width:25%
			padding-bottom :25%
			box-sizing :border-box
			height :0
			
			.icon-img-tu
				position: absolute;
				top:0
				left:0
				bottom :.44rem
				right :0
				
				.tu1
					height 100%
			.icon-font
				position: absolute
				left :0
				right :0
				bottom :0
				height :.44rem
				line-height:.44rem 
				text-align :center
				buhuanhang()


				

</style>